<template>
  <div>
    <!-- 新增分类 -->
    <div  class="dialog-class">
      <el-button plain @click="dialogVisible = true">
        新增
      </el-button>

      <el-dialog
        v-model="dialogVisible"
        title="新增分类"
        width="500"
      >
        <span>
          <el-form :model="addcategory" label-width="80px" 
          ref="jiaoye" :rules="rules">
            <el-form-item label="分类名称" prop="categoryName">
              <el-input v-model="addcategory.categoryName" />
            </el-form-item>
            <el-form-item label="分类缩写" prop="categoryAlias">
              <el-input v-model="addcategory.categoryAlias" />
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="tijiao(jiaoye)">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="categoryName" label="分类名称" width="180" />
      <el-table-column prop="categoryAlias" label="分类缩写" width="180" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column prop="user" label="创建人" width="180" >
        <template v-slot="scope">
            <el-tag>{{ scope.row.user.username }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template v-slot="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click="xiangqing(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 --->
    <div class="pagination">
      <el-pagination
        :current-page="canshu.pageNum"
        :page-size="canshu.pageSize"
        :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="canshu.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 文章详情 -->
    <el-dialog
      v-model="dialogVisiblexiang"
      title="文章详情"
      width="900px"
    >
      <span>
        <el-table :data="tableDataxiang" style="width: 100%">
          <el-table-column prop="categoryName" label="分类名称" width="180" />
          <el-table-column prop="categoryAlias" label="分类缩写" width="180" />
          <el-table-column prop="user" label="创建人" width="180" >
            <template v-slot="scope">
                <el-tag>{{ scope.row.user.username }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" />
        </el-table>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisiblexiang = false">关闭</el-button>
        </div>
      </template>
      
    </el-dialog>
    
  </div>
</template>
<script setup>
import { ref, reactive,onMounted} from 'vue'
// 引入提示框
import { ElMessage,ElMessageBox } from 'element-plus'
// 引入请求
import { fenlei,savecategory,deletecategory,xiangCategory } from '@/api/category'

//引入pinia
import {useUserStore} from '@/stores/token.js'; 
//获取容器对象
const us=useUserStore(); 
//获取容器对象中的数据
console.log(us.denglu); 
//获取登录人的id
const id=us.denglu.id;

//文章详情
const dialogVisiblexiang = ref(false)
const tableDataxiang = ref([])

const xiangqing= async(obj)=>{
  dialogVisiblexiang.value = true
  const res=await xiangCategory(obj);
  console.log(res);
  if(res.code==20041){
        ElMessage({
            message: res.msg,
            type: 'success',
            plain: true,
        })
      tableDataxiang.value=[res.data];
    }else{
       ElMessage({
            message: res.msg,
            type: 'error',
            plain: true,
        })
    }
}

// 定义表格数据
const tableData = ref([])
//定义分页参数
const canshu=ref({
  pageNum:1,
  pageSize:2,
  total:0,
  object:id
})
console.log(canshu.value)
//获取登录人的id
const getfenlei = async() =>{
  const res=await fenlei(canshu.value);
  console.log(res);
  if(res.code==20041){
        ElMessage({
            message: res.msg,
            type: 'success',
            plain: true,
        })
       tableData.value=res.data.list;
       canshu.value.total=res.data.total;
    }else{
       ElMessage({
            message: res.msg,
            type: 'error',
            plain: true,
        })
    }
}
//当你修改每页条数时触发该事件
const handleSizeChange = (val) => {
  canshu.value.pageSize=val;  //把选中的每页显示条数赋值给canshu.pageSize
  getfenlei(); //重新调用getfenlei方法
}
//当你修改页码时会触发该事件
const handleCurrentChange = (val) => {
  canshu.value.pageNum=val; //把点击的页码赋值给canshu.pageNum
  getfenlei();  //重新调用getfenlei方法
}

//默认新增框是关闭的
const dialogVisible = ref(false)
// 定义新增文章的参数
const addcategory=ref({
  categoryName: '',
  categoryAlias: '',
  createUser:id
})

//定义用于校验登录的表单对象
const jiaoye =ref(null)
// 定义表单验证规则
const rules=ref({
    categoryName: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    categoryAlias: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ]
})

// 表单提交
const ti=async()=>{
  const res=await savecategory(addcategory.value);
    console.log(res);
    if(res.code==20005){
          ElMessage({
              message: res.msg,
              type: 'success',
              plain: true,
          })
          addcategory.value={}
          dialogVisible.value=false;
          getfenlei();
      }else{
        ElMessage({
              message: res.msg,
              type: 'error',
              plain: true,
          })
      }
}

// 点击提交按钮
const tijiao= (obj)=>{
    console.log(obj);
    // 触发obj这个表单的校验规则 如果校验通过 则valid是true  否则是false
    obj.validate((valid)=>{
            if(valid){
                ElMessage.success('校验成功')
                ti();
            }else{
                ElMessage.error('校验失败')
            }
    })
}

//删除文章
const shanchu= async(id)=>{
  const res= await deletecategory(id);
    console.log(res);
    if(res.code==20021){
          ElMessage({
              message: res.msg,
              type: 'success',
              plain: true,
          })
          getfenlei();
      }else{
        ElMessage({
              message: res.msg,
              type: 'error',
              plain: true,
          })
      }
}
const handleClick = (id) => {
  ElMessageBox.confirm(
    '确认删除吗？',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      shanchu(id);
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

//定义生命周期
//当页面加载完成时，执行onMounted
onMounted(()=>{
   getfenlei();
})

</script>


<style lang='scss' scoped>
.dialog-class{
  margin-bottom: 10px;
}
.pagination{
  margin-top: 10px;
}
</style>